<template>
    <el-card>
        <el-table border :data="skuList">
            <el-table-column
                type="index"
                label="序号"
                align="center"
                width="80"
            ></el-table-column>
            <el-table-column
                label="名称"
                width="150"
                show-overflow-tooltip
                prop="skuName"
            ></el-table-column>
            <el-table-column
                label="描述"
                width="150"
                show-overflow-tooltip
                prop="skuDesc"
            ></el-table-column>
            <el-table-column label="默认图片">
                <template #="{ row }">
                    <el-image
                        :src="row.skuDefaultImg"
                        style="width: 100px; height: 100px"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column
                label="重量(克)"
                width="100"
                prop="weight"
            ></el-table-column>
            <el-table-column
                label="价格(元)"
                width="100"
                prop="price"
            ></el-table-column>
            <el-table-column label="操作" fixed="right" width="300">
                <template #="{ row }">
                    <el-button
                        @click="onSale(row.id)"
                        icon="Top"
                        type="success"
                        v-if="row.isSale == 0"
                        size="small"
                    ></el-button>
                    <el-button
                        @click="cancelSale(row.id)"
                        icon="Bottom"
                        type="info"
                        v-else
                        size="small"
                    ></el-button>
                    <el-button
                        icon="Edit"
                        type="primary"
                        size="small"
                    ></el-button>
                    <el-button
                        icon="Warning"
                        type="info"
                        size="small"
                        @click="getSkuInfo(row)"
                    ></el-button>
                    <el-popconfirm
                        title="Are you sure to delete this?"
                        @confirm="deleteSku(row.id)"
                    >
                        <template #reference>
                            <el-button
                                icon="Delete"
                                type="danger"
                                size="small"
                            ></el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @change="getSkuList"
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            background
            layout=" prev, pager, next, jumper,->,total, sizes"
            :total="total"
            class="base-margin"
        />
        <el-drawer v-model="drawer">
            <template #header>
                <h4>查看商品详情</h4>
            </template>
            <template #default>
                <el-row>
                    <el-col :span="6">名称</el-col>
                    <el-col :span="18">{{ skuInfo?.skuName }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">描述</el-col>
                    <el-col :span="18">{{ skuInfo?.skuDesc }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">价格</el-col>
                    <el-col :span="18">{{ skuInfo?.price }}</el-col>
                </el-row>
                <el-row v-if="skuInfo?.skuAttrValueList?.length ? true : false">
                    <el-col :span="6">平台属性</el-col>
                    <el-col :span="18">
                        <el-tag
                            v-for="item in skuInfo?.skuAttrValueList"
                            :key="item.id"
                        >
                            {{ item?.valueName }}
                        </el-tag>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6" v-if="ifHaveAttr">销售属性</el-col>
                    <el-col :span="18" v-if="ifHaveAttr">
                        <el-tag
                            v-for="item in skuInfo?.skuSaleAttrValueList"
                            :key="item.id"
                        >
                            {{ item?.saleAttrValueName }}:{{
                                item?.saleAttrValueName
                            }}
                        </el-tag>
                    </el-col>
                </el-row>
                <el-row v-if="ifHaveImg">
                    <el-col :span="6">商品图片</el-col>
                    <el-col :span="18">
                        <el-carousel
                            :interval="4000"
                            type="card"
                            height="300px"
                        >
                            <el-carousel-item
                                v-for="item in skuInfo?.skuImageList"
                                :key="item.id"
                            >
                                <el-image :src="item.imgUrl"></el-image>
                            </el-carousel-item>
                        </el-carousel>
                    </el-col>
                </el-row>
            </template>
        </el-drawer>
    </el-card>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import {
    reqSkuList,
    reqOnSale,
    reqCancelSale,
    reqSkuInfo,
    reqDeleteSku,
} from '@/api/product/sku';
import type { SkuData, skuDetailResponseData } from '@/api/product/sku/type';
import { ElMessage } from 'element-plus';
const currentPage = ref<number>(1);
const pageSize = ref<number>(10);
const total = ref<number>();
const skuList = ref<SkuData[]>([]);
const drawer = ref(false);
const skuInfo = ref<any>();
const ifHaveAttr = ref(false);
const ifHaveImg = ref(false);
// 页面挂载发送请求
onMounted(() => {
    getSkuList();
});
const getSkuList = async () => {
    const res = await reqSkuList(currentPage.value, pageSize.value);
    if (res.code === 200) {
        skuList.value = res.data.records;
        total.value = res.data.total;
    }
};
// 商品上架
const onSale = async (id: number) => {
    const res = await reqOnSale(id);

    if (res.code === 200) {
        ElMessage.success('商品上架成功');
        getSkuList();
    }
};
// 商品下架
const cancelSale = async (id: number) => {
    const res = await reqCancelSale(id);
    if (res.code === 200) {
        ElMessage.success('商品下架成功');
        getSkuList();
    }
};
// 点击查看商品详情
const getSkuInfo = async (row: SkuData) => {
    drawer.value = true;
    const res: skuDetailResponseData = await reqSkuInfo(row.id as number);
    if (res.code === 200) {
        skuInfo.value = res.data;
        if (skuInfo.value?.skuImageList?.length === 0) {
            ifHaveImg.value = false;
        } else {
            ifHaveImg.value = true;
        }
        if (skuInfo.value?.skuAttrValueList?.length === 0) {
            ifHaveAttr.value = false;
        } else {
            ifHaveAttr.value = true;
        }
    }
};
// 删除
const deleteSku = async (id: number) => {
    const res = await reqDeleteSku(id);
    console.log('res', res);
    if (res.code === 200) {
        ElMessage.success('删除成功');
        getSkuList();
    } else {
        ElMessage.error('删除失败');
    }
};
</script>

<style scoped>
.el-row {
    margin-bottom: 10px;
}
.el-row:last-child {
    margin-bottom: 0;
}
.el-tag {
    margin-right: 10px;
}
</style>
